import React, {Component} from 'react';
import { Button} from 'antd'
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import {apiGetportalArticlePage, apiGetportalArticleEdit,apiGetportalArticleAdd,apiGetportalArticleDel} from '@/request/protalArticle'
import TheDialog from "../../../components/TheDialog";
import Editor from "./component/editor";
import Add from "./component/add";

class Website extends Component {
    formRef = React.createRef();
    state = {
        loading: false,
        dataSource: null,
        columns: [
            {
                title: '序号',
                render: (text, record, index) => index + 1,
                width: 100,
                align: 'center'
            },
            {
                title: '标题',
                dataIndex: 'title',
                key: 'title',
                align: 'center'
            },
            {
                title: '操作',
                align: 'center',
                width: 100,
                render: record => {
                    return <div>
                        <TheButton auth={'aboutUs:update'} onClick={() => this.editor(record)}>修改</TheButton>
                        <TheButton auth={'aboutUs:update'} onClick={() => this.deleted(record)}>删除</TheButton>
                    </div>
                }
            }
        ],
        initialValues: null,
        dialogStatus: false,
        title: null,
        btnLoading: false,
        dialogAdd: false,
        addLoading:false,
        pageData:{
            pageNo:1,
            pageSize:100
        }
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        let page = this.state.pageData
        const data = await apiGetportalArticlePage({pageNo:page.pageNo, pageSize:page.pageSize})
        this.setState({
            loading: true
        })
        if (data.code === 0) {
            this.setState({
                dataSource: data.data
            }, () => {
                this.setState({
                    loading: false
                })
            })
        } else {
            this.setState({
                loading: false
            })
        }
    }

    onFinish = async value => {
        console.log(value)
        const {initialValues} = this.state
        this.setState({
            btnLoading: true
        })
        const data = await apiGetportalArticleEdit({...value, id: initialValues.id})
        if (data.code === 0) {
            this.setState({
                btnLoading: false
            }, async () => {
                await this.getData()
                this.dialogCancel()
                React.$message({
                    type: 'info',
                    content: '修改成功'
                })
            })
        } else {
            this.setState({
                btnLoading: false
            })
        }
    }

    onSave = async (value) =>{
        this.setState({
            addLoading:true
        })
        if(value.preImgUrl === undefined){
            value.preImgUrl = ''
        }
        if(value.content === undefined){
            value.content = ''
        }
        const res = await apiGetportalArticleAdd({...value})
        if(res.code === 0){
            this.setState({
                addLoading:false
            },()=>{
                this.getData()
                this.AdddialogCancel()
                React.$message({
                    type: 'info',
                    content: '添加成功'
                })
            })
        }else{
            this.setState({
                addLoading:false
            },()=>{
                this.getData()
                React.$message({
                    type: 'warning',
                    content: res.codeMessage
                })
            })
        }
    }

    toAdd = () => {
        this.setState({
            dialogAdd: true,
            title: '新增文章',
        })
    }

    editor = value => {
        this.setState({
            dialogStatus: true,
            title: '修改文章',
            initialValues: value
        },()=>{
            console.log(11)
        })
        
    }
    
    deleted = async (value) =>{
        let dataId = value.id
        React.$confirm({
            title: '您确认删除此文章吗？',
            onOk: async () => {
                let res = await apiGetportalArticleDel({id:dataId})
                if(res.code === 0){
                    this.getData()
                    React.$message({
                        type: 'info',
                        content: '删除成功'
                    })
                }else{
                    this.getData()
                    React.$message({
                        type: 'info',
                        content: res.codeMessage
                    })
                }
            }
        })
    }

    AdddialogCancel = () => {
        this.setState({
            dialogAdd: false,
            addLoading:false,
            title: ''
        })
    }

    dialogCancel = () => {
        this.setState({
            dialogStatus: false,
            title: ''
        })
    }
    /**
     * @desc 设置新闻内容表单默认值
     * */
    setNewsContent = (data) => {
        this.formRef.current.setFieldsValue({advertisingSpaceContent: data})
    }

    render() {
        const {loading, dataSource, columns, initialValues, dialogStatus, title, btnLoading, dialogAdd, addLoading } = this.state
        return <div className={"p-layout-box configuration"}>
                <Button onClick={this.toAdd} >新增</Button>
            <div className={"p-layout-content"}>
                <TheTable loading={loading} dataSource={dataSource} columns={columns}  />
                
            </div>
            <TheDialog
                visible={dialogStatus}
                title={title}
                width={800}
                handleCancel={this.dialogCancel}
                footer={null}
            >
                <Editor btnLoading={btnLoading} data={initialValues} onFinish={this.onFinish}
                        dialogCancel={this.dialogCancel}/>
            </TheDialog>
            <TheDialog
                visible={dialogAdd}
                title={title}
                width={800}
                handleCancel={this.AdddialogCancel}
                footer={null}
            >
                <Add btnLoading={addLoading} onFinish={this.onSave}
                        dialogCancel={this.AdddialogCancel}/>
            </TheDialog>
        </div>;
    }
}

export default Website